<template>
  <div class="app-container">
    <div class="bg_fff mb_12 pl_14">
      <breadcrumb />
    </div>
    <div class="bg_fff userbox mt_10">
      <div class="c_000 f-16 flex aligncenter mb_20"><span class="c_F11616 mr_4">*</span> 账户信息</div>
      <el-form ref="userform" :model="form" :rules="rules" class="userform" label-width="100px">
        <el-form-item>
          <template slot="label">
            <span class="labelavatar">头像</span>
          </template>
          <div class="flex aligncenter">
            <div v-loading='avatarloading'>
              <img :src="avatar" alt="" class="avatar">
            </div>
            <!-- <div class="c_primary ml_15 updatebox commhover">
              修改头像
              <input type="file" name="" id="avatar" class="avatarinput commhover" @change="updateAvatar" />
            </div> -->
          </div>
        </el-form-item>
        <el-form-item label="用户名" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入用户名" class="maxw_input"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" class="maxw_input"></el-input>
        </el-form-item>
        <el-form-item label="绑定手机号">
          <el-input :value="phone" disabled placeholder="请输入手机号" class="maxw_input"></el-input>
          <el-button type="text" @click="handleUpdata" class="pl_15">修改手机号</el-button>
        </el-form-item>
        <el-form-item label="登录账号" prop="name">
          <el-input v-model="form.name" placeholder="请输入登录账号" class="maxw_input"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <!-- <el-input v-model="form.name" placeholder="请输入登录密码" class="maxw_input"></el-input> -->
          <el-button type="text" @click="handleEditPwd">修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flexcenter mt_30 mb_30">
      <el-button class="commbtn mr_30">取消</el-button>
      <el-button type="primary" @click="onSubmit" class="commbtn">提 交</el-button>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="pwdopen"
      width="30%"
      class="commdia"
      :before-close="handleClosePwd">
      <reset-pwd @close='handleClosePwd'/>
    </el-dialog>

    <el-dialog
      title="修改手机号"
      :visible.sync="open"
      width="520px"
      class="commdia"
      :before-close="handleClose">
      <update-phone @close='handleClose' />
    </el-dialog>
  </div>
</template>

<script>
// import userAvatar from "./userAvatar";
// import userInfo from "./userInfo";
import ResetPwd from "@/layout/components/ResetPwd";
import { getInfo, editUserInfo,editEmail } from '@/api/login'
import { mapGetters } from 'vuex'
// import { getUserProfile } from "@/api/system/user";
import { validPhone } from '@/utils/validate'
import updatePhone from './updatePhone'

export default {
  name: "Profile",
  components: {ResetPwd, updatePhone },
  data() {
    return {
      avatarloading: false,
      form: {
        name:'',
        email:'',
        nickname:''
      },
      rules:{
        name:[{ required: true, message: "用户名称不能为空", trigger: "blur" }],
        email: [
          // { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
      },
      pwdopen:false,
      open:false,
    };
  },
  computed:{
    ...mapGetters([
      'avatar','phone'
    ]),
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser(type) {
      getInfo().then(response => {
        let user = response.data;
        this.form.nickname = user.user_nickname
        this.form.name = user.user_login
        this.form.email = user.user_email
      });
    },

    updateAvatar(event){
      var file = event.currentTarget.files[0]
      if (isOverSize(file.size, 5)) {
        this.$message.warning("头像大小不能超过5MB");
        return;
      }
      this.avatarloading = true
      var formData = new FormData();
      formData.append("file", file);
      formData.append("name", 'home');
      uploadPhoto(formData).then((res) => {
        this.handleUploadSuccess(res.data, file)
          this.imgsrc = this.domain + "/" + res.data;
          document.getElementById("avatar").value = null;
      }).catch(()=>{
        document.getElementById("avatar").value = null;
        this.avatarloading = false
      });
    },

    handleUploadSuccess(data, file){
      this.$store.dispatch('UploadAvatar',data.url).then(()=>{
        this.$message.success('修改成功')
        this.avatarloading = false
      }).catch(e=>{
        this.avatarloading = false
      })
    },

    handleEditPwd(){
      this.pwdopen = true
    },

    handleClosePwd(){
      this.pwdopen = false
    },

    handleUpdata(){
      this.open = true
    },

    handleClose(){
      this.open = false
    },

    onSubmit(){
      this.$refs.userform.validate(valid=>{
        if(!valid) return
        editUserInfo(this.form).then(res=>{
          this.$message.success('修改成功')
          this.$store.commit('SET_NAME',this.form.name)
          this.getUser()
        })
      })
    },

  }
};
</script>
<style lang="scss" scoped>
.userbox{
  padding: 20px;
}
.updatebox{
  position: relative;
  overflow: hidden;
  height: 32px;
}
.avatarinput{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.labelavatar{
  line-height: 70px;
}
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.userform{
  ::v-deep .el-form-item__label{
    font-weight: normal;
    font-size: 14px;
    color: #545867;
  }
}
.maxw_input{
  max-width: 560px;
}
.l_box{
  flex: 1;
}
.commbtn{
  border-radius: 60px;
  min-width: 120px;
}
</style>
